<template>
    <div class="PersonSendStatus">
        <!-- 头部 -->
		<Header :navActive="-1" ref="Header"/>
		<!-- 内容区域 -->
		<div class="main cl">
            <!-- banner -->
            <div class="banner"></div>
            <!-- block -->
            <div class="block w1200">
                <div class="left fl">
                    <div class="tabs">
                        <div class="item" :class="tabsActive==index?'active':''" v-for="(item,index) in tabs" :key="index" @click="changeType(index)">{{item}}</div>
                    </div>
                    <div class="filter" v-if="tabsActive==0">
                        <div class="item" :class="filterActive==index?'active':''" v-for="(item,index) in filter" :key="index" @click="filterClick(index,item.state)">{{item.title}}</div>
                    </div>
                    <div class="filter" v-if="tabsActive==1||tabsActive==2">
                        <div class="item" :class="filterActive==index?'active':''" v-for="(item,index) in filter1" :key="index" @click="filterClick(index,item.state)">{{item.title}}</div>
                    </div>
                    <div class="filter" v-if="tabsActive==3" style="height: 20px"></div>
                    <div class="list">
                        <template v-if="tabsActive==0">
                            <div class="item" v-for="(item,index) in list" :key="index">
                                <router-link :to="{name:'JobDetails',query:{id:item.jobId}}" target="_blank">
                                    <div class="title">{{item.opJob.jobName}}
                                        <!-- <span v-if="item.state==0">未阅读</span>
                                        <span v-if="item.state==1">已阅读</span> -->
                                        <span v-if="item.state==3">通过筛选</span>
                                    </div>
                                    <div class="money">{{item.opJob.money}}</div>
                                    <div class="other">
                                        <div class="company">{{item.enInfo.enName}}</div>
                                        <div class="date">投递时间：{{item.createTime}}</div>
                                    </div>
                                </router-link>
                                <div class="btn">
                                    <el-button type="text" icon="el-icon-star-off" class="collect" @click="cancelSendResume(item.id)">取消投递</el-button>
                                </div>
                            </div>
                        </template>
                        <template v-if="tabsActive==1">
                            <div class="item" v-for="(item,index) in list" :key="index" @click="interviewOperation(item.id)">
                                <div class="title">{{item.opJob.jobName}}
                                    <span v-if="item.outLineState==0">待接受</span>
                                    <span v-if="item.outLineState==1">已接受</span>
                                    <span v-if="item.outLineState==2">已拒绝</span>
                                </div>
                                <div class="money">{{item.opJob.money}}</div>
                                <div class="other">
                                    <div class="company">{{item.enInfo.enName}}</div>
                                    <div class="date">邀请时间：{{item.createTime}}</div>
                                </div>
                            </div>
                        </template>
                        <template v-if="tabsActive==2">
                            <div class="item" v-for="(item,index) in list" :key="index" @click="entryOperation(item.id)">
                                <div class="title">{{item.opJob.jobName}}
                                    <span v-if="item.acceptFlag==0">待接受</span>
                                    <span v-if="item.acceptFlag==1">已接受</span>
                                    <span v-if="item.acceptFlag==2">已拒绝</span>
                                </div>
                                <div class="money">{{item.opJob.money}}</div>
                                <div class="other">
                                    <div class="company">{{item.enInfo.enName}}</div>
                                    <div class="date">邀请时间：{{item.createTime}}</div>
                                </div>
                            </div>
                        </template>
                        <template v-if="tabsActive==3">
                            <div class="item" v-for="(item,index) in list" :key="index">
                                <router-link :to="{name:'JobDetails',query:{id:item.jobId}}" target="_blank">
                                    <div class="title">{{item.opJob.jobName}}</div>
                                    <div class="money">{{item.opJob.money}}</div>
                                    <div class="other">
                                        <div class="company">{{item.enInfo.enName}}</div>
                                        <div class="date">收藏时间：{{item.createTime}}</div>
                                    </div>
                                </router-link>
                                <div class="btn">
                                    <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionDelete(item.jobId)">取消收藏</el-button>
                                </div>
                            </div>
                        </template>
                    </div>
                    <!-- 暂无数据 -->
                    <nodata v-if="list.length==0" />
                    <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo" :page-size='pageSize' :total="pageTotal" @current-change="handleCurrentChange"></el-pagination>
                </div>
                <div class="right fr">
                    <!-- 个人信息 -->
                    <PersonUserInfo @UploadResume="UploadResume"  @LookEnclosure="LookEnclosure"/>
                </div>
            </div>
        </div>
        <!-- 底部 -->
		<Footer />
        <!-- 面试详情操作 -->
        <el-dialog title="面试邀请" width="800px" :visible.sync="interviewOperationFlag">
			<div class="interviewOperation">
				<div class="title">{{interviewInfo.opJob.jobName}}</div>
                <div class="money">{{interviewInfo.opJob.money}}</div>
                <div class="company">{{interviewInfo.enInfo.enName}}</div>
                <div class="info">
                    <div class="t">面试信息</div>
                    <ul>
                        <li><span>面试方式：</span>
                            <template v-if="interviewInfo.type==0">现场面试</template>
                            <template v-if="interviewInfo.type==1">视频面试</template>
                        </li>
                        <li><span>面试时间：</span>
                            <template v-if="interviewInfo.type==0">{{ interviewInfo.time }}</template>
                            <template v-if="interviewInfo.type==1">
                                {{ interviewInfo.time }}至{{ interviewInfo.interviewEndTime }}
                            </template>
                        </li>
                        <li><span>面试地点：</span>{{ interviewInfo.location }}</li>
                        <li><span>联系人：</span>{{ interviewInfo.contactName }}</li>
                        <li><span>电话：</span>{{ interviewInfo.contactPhone }}</li>
                        <li><span>备注信息：</span>{{ interviewInfo.remark }}</li>
                    </ul>
                </div>
                <div class="operation">
                    <div class="btns" v-if="interviewInfo.outLineState==0">
                        <el-button type="primary" @click="acceptInview(1)">接受面试</el-button>
                        <el-button @click="acceptInview(2)">拒绝面试</el-button>
                    </div>
                    <div class="text" v-if="interviewInfo.outLineState==1">
                        <p style="line-height: 45px;">已接受面试邀请
                          <template v-if="interviewInfo.type==1 && (!interviewInfo.onLineState || interviewInfo.onLineState == 0)">
                                ，请等待会议开启
                                <!-- <el-button type="text" class="ml10" @click="openVideoView(interviewInfo.internetUrl)">点击参加</el-button> -->
                           </template>
                           <template v-if="interviewInfo.type==1 && interviewInfo.onLineState == 2">
                                ，<el-button type="text" class="ml10" @click="openVideoView(interviewInfo.internetUrl)">点击参加</el-button>
                           </template>
                           <template v-if="interviewInfo.type==1 && interviewInfo.onLineState == 1">
                                ，已结束面试
                           </template>
                        </p>
                    </div>
                    <div class="text" v-if="interviewInfo.outLineState==2">
                        <p>已拒绝面试邀请，去看看新机会吧~</p>
                    </div>
                </div>
			</div>
		</el-dialog>
        <!-- 入职邀请详情操作 -->
        <el-dialog title="入职邀请" width="800px" :visible.sync="entryOperationFlag">
			<div class="interviewOperation">
				<div class="title">{{entryInfo.opJob.jobName}}</div>
                <div class="money">{{entryInfo.opJob.money}}</div>
                <div class="company">{{entryInfo.enInfo.enName}}</div>
                <div class="info">
                    <div class="t">入职信息</div>
                    <ul>
                        <li><span>入职时间：</span>{{entryInfo.time}}</li>
                        <li><span>入职地点：</span>{{entryInfo.location}}</li>
                        <li><span>联系人：</span>{{entryInfo.contactName}}</li>
                        <li><span>电话：</span>{{entryInfo.contactPhone}}</li>
                        <li><span>备注信息：</span>{{entryInfo.remark}}</li>
                    </ul>
                </div>
                <div class="operation">
                    <div class="btns" v-if="entryInfo.acceptFlag==0">
                        <el-button type="primary" @click="acceptEntry(1)">接受入职</el-button>
                        <el-button @click="acceptEntry(2)">拒绝入职</el-button>
                    </div>
                    <div class="text" v-if="entryInfo.acceptFlag==1">
                        <p>已接受入职邀请，记得准时入职哦~</p>
                    </div>
                    <div class="text" v-if="entryInfo.acceptFlag==2">
                        <p>已拒绝入职邀请，去看看新机会吧~</p>
                    </div>
                </div>
			</div>
		</el-dialog>
    </div>
</template>

<script>
import {
    acceptEntry,
    acceptInview,
    collectionDelete,
    entryDetails,
    entryRecord,
    dropResumeInfo,
    personInfoEnterNum,
    interviewDetails,
    interviewRecord,
    myCollectRecord,
    postRecord
} from '@/api/api'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import PersonUserInfo from '@/components/PersonUserInfo.vue'
import nodata from '@/components/nodata.vue'

export default {
    //组件注入
    components: {Header, Footer, PersonUserInfo, nodata},
    //存放数据
    data() {
        return {
            tabs: ['已投递', '面试邀请', '入职邀请', '已收藏'],
            tabsActive: 1,
            filter: [
                {
                    title: '全部',
                        state:''
                    },
                    /* {
                        title:'未阅读',
                        state: 0
                    },
                    {
                        title:'已阅读',
                        state: 1
                    }, */
                    {
                        title:'通过筛选',
                        state: 3
                    }
                ],
                filter1:[
                    {
                        title:'全部',
                        state:''
                    },
                    {
                        title:'待接受',
                        state: 0
                    },
                    {
                        title:'已接受',
                        state: 1
                    },
                    {
                        title:'已拒绝',
                        state: 2
                    }
                ],
                filterActive:0,
                filterState: '',//筛选状态
                pageNo:1,//当前页码
                pageSize:10,//单页个数
                pageTotal:1,//总数
                list:[],//列表
                interviewOperationFlag:false,//面试操作弹出
                entryOperationFlag:false,//入职操作弹出
                interviewInfo:{
                    opJob:{
                        jobName:'',
                        minMoney:'',
                        maxMoney:''
                    },
                    enInfo:{
                        enName:''
                    }
                },
                entryInfo:{
                    opJob:{
                        jobName:'',
                        minMoney:'',
                        maxMoney:''
                    },
                    enInfo:{
                        enName:''
                    }
                },
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {
            $route() {
                this.tabsActive = this.$route.query.active
                this.changeType(this.$route.query.active)
            }
        },
        //方法集合
        methods: {
            openVideoView(internetUrl){
                if(internetUrl){
                    window.open(internetUrl)
                }else{
                     this.$message.error("还未到面试时间");
                }
            },
            //上传简历
            UploadResume(e){
                this.$refs.Header.UploadResumeFlag = e.UploadResumeFlag
            },
            //预览附件简历
            LookEnclosure(e){
                this.$refs.Header.LookEnclosureFlag = e.LookEnclosureFlag
            },
            //切换类型
            changeType(index){
                this.tabsActive = index 
                this.filterActive = 0
                this.filterState = ''
                this.list = []
                if(index==0){
                    this.postRecord()
                }
                if(index==1){
                    this.interviewRecord()
                }
                if(index==2){
                    this.entryRecord()
                }
                if(index==3){
                    this.myCollectRecord()
                }
            },
            //筛选
            filterClick(index,state){
                this.filterActive = index
                this.filterState = state
                this.list = []
                if(this.tabsActive==0){
                    this.postRecord()
                }
                if(this.tabsActive==1){
                    this.interviewRecord()
                }
                if(this.tabsActive==2){
                    this.entryRecord()
                }
                if(this.tabsActive==3){
                    this.myCollectRecord()
                }
            },
            //已投递
            postRecord(){
                postRecord({
                    'pageNo': this.pageNo,
                    'pageSize': this.pageSize,
                    'state':this.filterState
                }).then(res =>{
                    if(res.code==200){
                        let list = res.result.records
                        this.pageTotal = res.result.total
                        for(let i in list){
                            list[i].opJob.money = list[i].opJob.minMoney/1000 +'K-'+ list[i].opJob.maxMoney/1000 +'K'
                        }
                        this.list = list
                    }
                });	
            },
            //面试邀请
            interviewRecord(){
                interviewRecord({
                    'pageNo': this.pageNo,
                    'pageSize': this.pageSize,
                    'outLineState':this.filterState
                }).then(res =>{
                    if(res.code==200){
                        let list = res.result.records
                        this.pageTotal = res.result.total
                        for(let i in list){
                            list[i].opJob.money = list[i].opJob.minMoney/1000 +'K-'+ list[i].opJob.maxMoney/1000 +'K'
                        }
                        this.list = list
                    }
                });	
            },
            //入职邀请
            entryRecord(){
                entryRecord({
                    'pageNo': this.pageNo,
                    'pageSize': this.pageSize,
                    'acceptFlag':this.filterState
                }).then(res =>{
                    if(res.code==200){
                        let list = res.result.records
                        this.pageTotal = res.result.total
                        for(let i in list){
                            list[i].opJob.money = list[i].opJob.minMoney/1000 +'K-'+ list[i].opJob.maxMoney/1000 +'K'
                        }
                        this.list = list
                    }
                });	
            },
            //已收藏
            myCollectRecord(){
                myCollectRecord({
                    'pageNo': this.pageNo,
                    'pageSize': this.pageSize,
                }).then(res =>{
                    if(res.code==200){
                        let list = res.result.records
                        this.pageTotal = res.result.total
                        for(let i in list){
                            list[i].opJob.money = list[i].opJob.minMoney/1000 +'K-'+ list[i].opJob.maxMoney/1000 +'K'
                        }
                        this.list = list
                    }
                });	
            },
            //切换页码
            handleCurrentChange(pageNo){
                this.pageNo = pageNo
                if(this.tabsActive==0){
                    this.postRecord()
                }
                if(this.tabsActive==1){
                    this.interviewRecord()
                }
                if(this.tabsActive==2){
                    this.entryRecord()
                }
                if(this.tabsActive==3){
                    this.myCollectRecord()
                }
            },
            //面试详情
            interviewOperation(id){
                //面试详情
                interviewDetails({
                    'id': id,
                }).then(res =>{
                    if(res.code==200){
                        this.interviewInfo = res.result
                        this.interviewInfo.opJob.money = this.interviewInfo.opJob.minMoney/1000 +'K-'+ this.interviewInfo.opJob.maxMoney/1000 + 'K'
                        this.interviewOperationFlag = true
                    }
                });
            },
            // 刷新数字 
            personInfoEnterNums(){
                personInfoEnterNum();
            },
             //取消投递简历
             cancelSendResume(id){
                var query =  {
                    'id': id
                }
                dropResumeInfo(query).then(res =>{
                    if(res.code==200){
                        this.$message.success('操作成功');
                        this.interviewOperationFlag = false
                        // 这里需要刷新右下方头像下面的数字
                            this.interviewRecord()
                            // this.personInfoEnterNums()
                        }else{
                            this.$message.error(res.message);
                        }
                });
             },
            //入职详情
            entryOperation(id){
                //入职邀请详情
                entryDetails({
                    'id': id,
                }).then(res =>{
                    if(res.code==200){
                        this.entryInfo = res.result
                        this.entryInfo.opJob.money = this.entryInfo.opJob.minMoney/1000 +'K-'+ this.entryInfo.opJob.maxMoney/1000 + 'K'
                        this.entryOperationFlag = true
                    }
                });
            },
            //接受或拒绝面试
            acceptInview(type){
                if(type==1){
                    acceptInview({
                        'inviewId': this.interviewInfo.id,
                        'state': type,
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('操作成功');
                            this.interviewOperationFlag = false
                            this.interviewRecord()
                        }else{
                            this.$message.error(res.message);
                        }
                    });	
                }else if(type==2){
                    this.$confirm('确认拒绝面试吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        acceptInview({
                            'inviewId': this.interviewInfo.id,
                            'state': type,
                        }).then(res =>{
                            if(res.code==200){
                                this.$message.success('操作成功');
                                this.interviewOperationFlag = false
                                this.interviewRecord()
                            }else{
                                this.$message.error(res.message);
                            }
                        });	
                    })
                }
            },
            //接受或拒绝入职
            acceptEntry(type){
                if(type==1){
                    acceptEntry({
                        'entryId': this.entryInfo.id,
                        'state': type,
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('操作成功');
                            this.entryOperationFlag = false
                            this.entryRecord()
                        }else{
                            this.$message.error(res.message);
                        }
                    });	
                }else if(type==2){
                    this.$confirm('确认拒绝入职吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        acceptEntry({
                            'entryId': this.entryInfo.id,
                            'state': type,
                        }).then(res =>{
                            if(res.code==200){
                                this.$message.success('操作成功');
                                this.entryOperationFlag = false
                                this.entryRecord()
                            }else{
                                this.$message.error(res.message);
                            }
                        });	
                    })
                }
            },
            //取消收藏职位
            collectionDelete(id){
                if(this.userLoginFlag()){
                    collectionDelete({
                        'id': id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('取消收藏成功');
                            this.myCollectRecord()
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            //判断登录状态
            this.userLoginFlag()
            this.tabsActive = this.$route.query.active
            console.log('active='+ this.tabsActive)
            if(this.tabsActive==0){
                this.postRecord()
            }
            if(this.tabsActive==1){
                this.interviewRecord()
            }
            if(this.tabsActive==2){
                this.entryRecord()
            }
            if(this.tabsActive==3){
                this.myCollectRecord()
            }
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .PersonSendStatus{background: #f6f6f6;
        .main{
            .banner{width: 100%;height: 120px;background: url('../../assets/person-bg.jpg') center no-repeat;background-size: cover;}
            .block{height: auto;overflow: hidden;margin-top: 30px;padding-bottom: 100px;
                .left{width: 900px;height: auto;overflow: hidden;
                    .tabs{height: auto;overflow: hidden;background: #fff;
                        .item{width: 180px;font-size: 16px;color: #333;line-height: 50px;float: left;cursor: pointer;text-align: center;position: relative;
                            &.active{color: #E54437;
                                &:after{content: "";width: 100%;height: 2px;background: #E54437;position: absolute;left: 0;bottom: 0;}
                            }
                        }
                    }
                    .filter{height: auto;overflow: hidden;
                        .item{padding: 0 20px;font-size: 14px;color: #333;line-height: 50px;float: left;cursor: pointer;text-align: center;position: relative;
                            &.active,&.hover{color: #E54437;}
                        }
                    }
                    .list{height: auto;overflow: hidden;background: #fff;
                        .item{height: auto;overflow: hidden;padding: 25px;display: block;border-bottom: 1px solid #eee;position: relative;cursor: pointer;
                            a{display: block;}
                            .title{font-size: 16px;color: #333;font-weight: bold;
                                span{float: right;font-size: 14px;color: #666;font-weight: normal;}
                            }
                            .money{font-size: 20px;color: #E72618;margin: 15px 0;}
                            .other{height: auto;overflow: hidden;font-size: 14px;color: #999;
                                .company{float: left;}
                                .date{float: right;}
                            }
                            .btn{position: absolute;right: 25px;top: 20px;}
                        }
                    }
                }
                .right{width: 270px;height: auto;overflow: hidden;}
            }
        }
        .interviewOperation{height: auto;overflow: hidden;
            .title{font-size: 16px;color: #333;font-weight: bold;}
            .money{font-size: 20px;color: #E72618;margin: 10px 0;}
            .company{font-size: 14px;color: #999;border-bottom: 1px solid #eee;padding-bottom: 20px;margin-bottom: 20px;}
            .info{height: auto;overflow: hidden;border-bottom: 1px solid #eee;padding-bottom: 20px;
                .t{font-size: 14px;color: #333;font-weight: bold;}
                ul{height: auto;overflow: hidden;
                    li{height: auto;overflow: hidden;margin-top: 10px;
                        span{font-size: 14px;color: #999;}
                    }
                }
            }
            .operation{height: auto;overflow: hidden;
                .btns{height: auto;overflow: hidden;text-align: center;margin-top: 20px;
                    .el-button{margin: 0 10px;}
                }
                .text{font-size: 14px;color: #666;padding: 30px 0 10px;text-align: center;}
            }
        }
    }
</style>